<template>
  <div id="SlideBar">
    <ul>
      <!--
      高亮
      鼠标移动上去
      -->
      <li
        :class="$route.path === item.toPath?'active':''"
        @click="handleClick(item.toPath)"
        :key="item.toPath"
        class="item"
        v-for="(item ,index) in asideData">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
  import {getAsideData} from '../routes/route-config'

  export default {
    name: "SlideBar",
    computed: {
      asideData() {
        console.log(getAsideData());
        return getAsideData();
      }
    },
    methods: {
      handleClick(toPath) {
        console.log(this.$route);
        if (toPath === this.$route.fullPath) {
          return
        }
        this.$router.push(toPath);
      }
    }


    }
</script>

<style scoped>
  #SlideBar {
    width: 200px;
    position: absolute;
    top: 81px;
    background-color: chartreuse;
    bottom: 0;
    left: 0;

  }

  .item {
    width: 100%;
    margin-top: 1px;
    background-color: #31d12f;
    line-height: 40px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    user-select: none;
  }

  .item:hover, .item.active {
    background-color: #ff8095;
    color: #fff;
  }


</style>
